<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->
<title><c:out value="${not empty role.id ? '修改角色信息':'新增角色'}" /></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<jsp:include page="../common/import.jsp"></jsp:include>
</head>
<body>
    <!-- <div class="iframe-cot pt0" id="smIframe"> -->
    <div class="right-form mt0">
       <form class="add-form" id="editForm" method="post" action="#" onsubmit="return false;">
          <input id="s_roleId" type="hidden" value="${role.id}">
		<ul class="w100 layer-form">
               <li>
                   <label class="ser-label"><em class="text-red mr5">*</em>角色名称：</label>
                   <div class="form-content">
                   <input id="s_roleName" name="roleName" class="inputText" value="${role.name}" type="text" >
                   <div class="form-tips text-red" ></div>
                   </div>
               </li>
               <li>
                   <label class="ser-label"><em class="text-red mr5">*</em>角色编码：</label>
                     <input id="s_old_roleCode" type="hidden" value="${role.roleCode }"	/>
                  
                   <div class="form-content">
                   <input id="s_roleCode" name="roleCode" class="inputText" value="${role.roleCode}" type="text" onblur="checkRoleCode();" />
                   <div class="form-tips text-red" id="roleCodeTip"></div>
                   </div>
               </li>
               <li>
                   <label class="ser-label"><em class="text-red mr5">*</em>角色类型：</label>
                   <div class="form-content">
                      <select id="s_roleType" name="roleType" class="form-control-select" <c:out value="${not empty role.id ? 'disabled=disabled':''}" /> >
                                      <option value="">请选择</option>
										<c:forEach items="${roleTypeList}" var="rt">
											<option value="${rt.code }" <c:if test="${rt.code eq role.type }"  >selected</c:if> >${rt.name }</option>
										</c:forEach>
                      </select>
                      <div class="form-tips text-red" ></div>
                   </div>
               </li>
               <li>
                   <label class="ser-label"><em class="text-red mr5">*</em>角色状态：</label>
                   <div class="form-content">
                   		<input  name="s_status"  value="0" type="radio" <c:if test="${empty role.status or '0' eq role.status }">checked</c:if> >启用
                        <input  name="s_status"  value="1" type="radio" <c:if test="${'1' eq role.status }">checked</c:if> >停用
                   		<div class="form-tips text-red" ></div>
                   </div>
               </li>      
               <li>
                   <label class="ser-label"></label>
                   <div class="form-content">
                   		
                   </div>
               </li>             
               <%-- <li style="width:100%;">
                   <label class="ser-label">赋给用户：</label>
                   <div class="form-content clearfix">
                   
                       <div class="form-content clearfix">
                           <div id="userDiv" class="pull-left choose-box choose-userIds" style="width:70%;height:200px;">
                               <c:if test="${not empty roleUserList }" >
                                <c:forEach items="${roleUserList }" var="u">
                               <span class="choose-user" value="${u.userId }">${u.userName }<a href="javascript:void(0);" onclick="delUser(this)" class="link-blue"><i class="fa fa-times ml5"></i></a></span>
                           		</c:forEach>
                           		</c:if>
                           </div>
                           <span class="pull-left btn-choose" ><a href="javascript:void(0);" onclick="showUserTable()" class="btn btn-default btn-choose-lg" style="height:200px;line-height: 50px">选<br/>择<br/>用<br/>户</a></span>
                       		
                        </div>
                   </div>
               </li> --%>
               
               <li class="w-per">
                   <label class="ser-label">&nbsp;</label>
                   <div class="form-content clearfix">
                       <button class="btn btn-orange" id="savebtn" onclick="save()" ><i class="fa fa-save mr5"></i>保存</button>
                       <button id="cancelBtn" class="btn btn-default" onclick="closeLayerOpen()"><i class="fa fa-reply mr5"></i>返回</button>
                   </div>
               </li>
            </ul>
    	</form>
    </div>
  <!-- </div>  -->    
</body>
<script type="text/javascript">

function closeLayerOpen(){
	parent.layer.close(parent.layer.getFrameIndex(window.name));
}

$("#editForm").validate({
	onkeyup : false,
	onsubmit: false,
	onfocusout:  function(element){
	      $(element).valid() ;
				 }, 
	rules : {
		roleName : {
			required : true,
			maxlength: 50,
			isContainsSpecialChar: true 
		},
		roleCode:{
			required : true,
			maxlength: 50,
			isContainsSpecialChar: true 
		},
		roleType : {
			required : true
		}
	},
	messages : {
		roleName : {
			required : "请完善必填信息",
			maxlength : "请输入正确的角色名称",
			isContainsSpecialChar : "请输入正确的角色名称"
		},
		roleCode : {
			required : "请完善必填信息",
			maxlength : "请输入正确的角色编码",
			isContainsSpecialChar : "请输入正确的角色编码"
		},
		roleType : {
			required : "请完善必填信息"
		}
	},
	errorPlacement: function(error, element) {
		 if(error){    //error存在的时候
			 $(element).next().html(error); //showMsg为你自定义的信息显示区域的id。
			
		 }                            //这里的element是录入数据的对象  
		 $(element).addClass('input-danger');
		 
	 },
	 success:function(label){
		 $(label).parent().prev().removeClass('input-danger');
		
	 }
});



function save(){
	
	if(!$("#s_roleName").valid() || !$("#s_roleType").valid() || !$("#s_roleCode").valid()){
		
		return false;
	}
	
	var id=$("#s_roleId").val();
	var roleName=$.trim($("#s_roleName").val());
	var roleType=$.trim($("#s_roleType").val());
	var status=$.trim($("input:radio[name='s_status']:checked").val());
	
	checkRoleCode();
	if(roleCodeUnique == false){
		return;
	}
	var roleCode = $.trim($("#s_roleCode").val());
	//获取用户id
	var userIds = '';
	$("#userDiv span").each(function(index,obj){
		if(index == 0){
			userIds = userIds + $(obj).attr('value');
		}else{
			userIds = userIds + ","+$(obj).attr('value');
		}
	});
		
//	alert(userIds);
	var data={
			roleId:id,
			roleName:roleName,
			roleCode:roleCode,
			roleType:roleType,
			status:status,
			userIds:userIds
			};
	
	//防止多次点击
	$("#savebtn").attr('disabled','disabled');
	
 	$.post("${ctx}/role/save",data,function(result){
		if(result.code=="success"){
			 successTip();
			 if(id == null || id == ''){
				 window.parent.jumpPage(1,'',true);
			 }else{
				 window.parent.jumpPage('','',true);
			 }
			 setInterval("parent.layer.close(parent.layer.getFrameIndex(window.name))",2000);
			 
		}else{
			errorTip();
			$("#savebtn").removeAttr('disabled');
		}
	},"json"); 
}
//roleCode唯一性
var roleCodeUnique = false;
function checkRoleCode(){
	console.log('校验角色编码....');
	roleCodeUnique = false;
	if($("#s_roleCode").valid()){
		var roleCode = $.trim($("#s_roleCode").val());
		var roleId = $("#s_roleId").val();
		if(roleId != ''){
			//修改，如果和原值一样，则说明没变更
			var oldRoleCode = $("#s_old_roleCode").val();
			if(roleCode == oldRoleCode){
				roleCodeUnique = true;
				return true;
			}
		}
		
			$.ajax({
				url:'${ctx}/role/findByRoleCode/'+roleCode,
				async:false,//用同步
				type:"get",
				dataType:"json",
				success:function(data){
					if(data.code == '2'){
						roleCodeUnique = true;
						$("#roleCodeTip").html("");
					}else if(data.code=='1'){
						roleCodeUnique = false;
						$("#roleCodeTip").html("<span style='color:red;'>该角色编码已存在</span>");	
					}else{
						roleCodeUnique = false;
						$("#roleCodeTip").html("<span style='color:red;'>系统出错，校验失败</span>");
					}
				},
				error:function(){
					roleCodeUnique = false;
				}
			});
	}
}

//点击选择用户时，弹出用户列表供选择
function showUserTable(){
	 var _url = "${ctx}/role/open/user/page";
	layer.open({
	    type: 2,
	    title: "选择用户",
	    maxmin: false,
	    shadeClose: false, //点击遮罩关闭层
	    area : ['800px' , '500px'],
	    content: _url
	}); 
}


function delUser(obj){
	$(obj).parent('span').remove();
}
//增加用户
function addUser(users){
	var user = users.split(",");
	var i;
	var u;
	var html = '';
	for(i=0;i<user.length;i++){
		u = user[i].split('_');
		html += '<span class="choose-user" value="'+u[0]+'">'+u[1]+'<a href="javascript:void(0);" onclick="delUser(this)" class="link-blue"><i class="fa fa-times ml5"></i></a></span>';
	}
	$("#userDiv").append(html);
}
</script>
</html>